{% extends 'layout/base.html' %}
{% block title %}公众号管理 - 客一客爬虫后台管理系统模板{% endblock title %}
{% block content %}

<div class="container-fluid">

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <form class="pull-right search-bar" method="get" action="#!" role="form">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <input type="hidden" name="search_field" id="search-field" value="title">
                                <button class="btn btn-default dropdown-toggle" id="search-btn"
                                        data-toggle="dropdown" type="button" aria-haspopup="true"
                                        aria-expanded="false">
                                    分类筛选 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="{% url 'wx_official:offical_list' 'default' 1  %}"
                                           data-field="title">显示全部</a></li>
                                    <li><a tabindex="-1" href="{% url 'wx_official:offical_list' 'available' 1  %}"
                                           data-field="title">显示可用</a></li>
                                    <li><a tabindex="-1" href="{% url 'wx_official:offical_list' 'kyk' 1  %}"
                                           data-field="title">官网</a></li>
                                    <li><a tabindex="-1" href="{% url 'wx_official:offical_list' 'huoke' 1  %}"
                                           data-field="title">获客</a></li>
                                    <li class="divider"></li>
                                    {% for type in type_list %}
                                    <li><a tabindex="-1" href="{% url 'wx_official:offical_list' type 1  %}"
                                           data-field="title">{{ type }}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <input type="text" disabled class="form-control" value="" name="keyword"
                                   placeholder="请输入名称">
                        </div>
                    </form>
                    <div class="toolbar-btn-action">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal1"
                                data-whatever="@mdo"><i class="mdi mdi-search-web"></i>搜索
                        </button>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addOrg"
                                data-whatever="@mdo"><i class="mdi mdi-calendar-plus"></i> 离线添加
                        </button>
                        {% csrf_token %}
                        <a class="btn btn-warning m-r-5" href="#" id="onclickSpider"><i
                                class="mdi mdi-arrow-down-bold-box"></i>
                            爬取</a>
                        <a class="btn btn-success m-r-5" href="#" id="onclickAvailable"><i class="mdi mdi-check"></i> 启用</a>
                        <a class="btn btn-warning m-r-5" href="#" id="onclickUnAvailable"><i
                                class="mdi mdi-block-helper"></i> 禁用</a>
                        <a class="btn btn-danger" href="#"><i class="mdi mdi-window-close"></i> 删除</a>
                    </div>
                </div>
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table table-bordered" id="orgLists">
                            <thead>
                            <tr>
                                <th>
                                    <label class="lyear-checkbox checkbox-primary">
                                        <input type="checkbox" id="check-all"><span></span>
                                    </label>
                                </th>
                                <th>编号</th>
                                <th>logo</th>
                                <th>公众号名字</th>
                                <th>账号名字</th>
                                <th>类型</th>
                                <th>作用位置</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for index in skus_page.object_list %}
                            <tr id="{{ index.id }}" class="org_list_td">
                                <td>
                                    <label>
                                        <input type="checkbox" name="org_ids" value="{{ index.id }}">
                                    </label>
                                </td>
                                <td>{{ index.id }}</td>
                                <td width="5%"><img class="img-responsive img-rounded" src="{{ index.logo_url }}" alt=""
                                                    style="width: 40px;text-align: center"></td>
                                <td class="orgName">{{ index.org_name }}</td>
                                <td class="orgFakeId">{{ index.fake_id }}</td>
                                <td>{{ index.article_type }}</td>
                                <td>
                                    {% if index.user_for == 0 %}官网
                                    {% elif index.user_for == 1 %}51客
                                    {% else %}都是
                                    {% endif %}
                                </td>
                                <td id="tds">
                                    <div class="btn-group">
                                        <a class="btn btn-sm btn-info editOrg" data-target="#myEditModel"
                                           href="{% url 'wx_official:edit_org' index.id  %}" title="编辑公众号信息"
                                           data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                                        {% if index.state == 0 %}
                                        <a class="btn btn-sm btn-default onClickSpider" title="去抓取" id="spiderPrg"
                                           data-toggle="tooltip"><i class="mdi mdi-cloud-download"></i></a>
                                        {% endif %}

                                        <a class="btn btn-sm btn-primary" title="文章列表"
                                           href="{% url 'wx_official:article_org' index.id 1 %}?sort=desc&include="><i
                                                class="mdi mdi-database"></i></a>
                                        <a class="btn btn-sm btn-warning deleteOrg" title="删除公众号" data-toggle="tooltip"
                                           role="button"><i class="mdi mdi-window-close"></i></a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                    <!--                    分页-->
                    <ul class="pagination">
                        {% if skus_page.has_previous %}
                        <li><span><a
                                href="{% url 'wx_official:offical_list' type_name skus_page.previous_page_number %}">«</a></span>
                        </li>
                        {% endif %}
                        {% if skus_page.number != 1 %}
                        <li>
                            <a href="{% url 'wx_official:offical_list' type_name 1 %}"><span>第一页</span></a>
                        </li>
                        {% endif %}
                        {% for pindex in pages %}

                        {% if pindex == skus_page.number %}
                        <li class="active"><a href="{% url 'wx_official:offical_list' type_name pindex %}"><span>{{ pindex }}</span></a>
                        </li>
                        {% else %}
                        <li>
                            <a href="{% url 'wx_official:offical_list' type_name pindex %}"><span>{{ pindex }}</span></a>
                        </li>
                        {% endif %}
                        {% endfor %}
                        {% if skus_page.has_next %}
                        {% if skus_page.next_page_number != max_page %}
                        <li class="disabled"><span>...</span></li>

                        <li><a href="{% url 'wx_official:offical_list' type_name max_page %}">最后一页</a>
                        </li>
                        <li><a href="{% url 'wx_official:offical_list' type_name skus_page.next_page_number %}">»</a>
                        </li>

                        {% else %}
                        <li><a href="{% url 'wx_official:offical_list' type_name skus_page.next_page_number %}">»</a>
                        </li>
                        {% endif %}
                        {% endif %}

                    </ul>

                </div>
            </div>
        </div>

    </div>


    {# 模态框 搜索公众号 #}
    <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">增加公众号</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" id="searhForm"
                          onkeydown="if(event.keyCode==13){return false;}">
                        <div class="form-group">
                            {% csrf_token %}
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="officialAccount" id="officialAccount"
                                       placeholder="输入公众号名字">
                                <span id="err_message" style="color: red;"></span>
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-info" id="searchOrg">搜索</button>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-body">
                    {# 这里ajax自动生成table表格 #}
                    <table class="table table-striped" id="tabJson">
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="onClickSubmit">提交</button>
                </div>
            </div>
        </div>
    </div>


    {# 模态框 离线新增公众号 #}
    <div class="modal fade" id="addOrg" tabindex="-1" role="dialog" aria-labelledby="exampleaddOrg">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleaddOrg">增加公众号</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="addOrgs">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="orgName" class="col-sm-2 control-label">公众号名称<span style="color: red">*</span>
                            </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="orgName" id="orgName"
                                       placeholder="输入公众号名字">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="fakeID" class="col-sm-2 control-label">公众号fakeID <span
                                    style="color: red"> * </span> </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="fakeID" id="fakeID"
                                       placeholder="输入公众号的fakeID">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="orgId" class="col-sm-2 control-label">公众号账号名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="orgId" id="orgId" placeholder="输入公众号账号名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="logoLink" class="col-sm-2 control-label">logo图标链接</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="logoLink" id="logoLink"
                                       placeholder="输入logo图标链接">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="useFor" class="col-sm-2 control-label">作用位置 <span style="color: red"> * </span></label>
                            <div class="col-sm-10">
                                <select id="useFor" class="form-control col-sm-1" name="useFor">
                                    <option>官网</option>
                                    <option>51客</option>
                                    <option>都是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="orgType" class="col-sm-2 control-label">机构类型 <span style="color: red"> * </span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="orgType" id="orgType" placeholder="机构类型">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="orgDesc" class="col-sm-2 control-label">机构简介 </label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="orgDesc" id="orgDesc" placeholder="机构简介"
                                       value="这家伙很懒，什么都没留下">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="orgLevel" class="col-sm-2 control-label">爬取优先级<span style="color: red">*</span></label>
                            <div class="col-sm-10">
                                <select id="orgLevel" class="form-control col-sm-1" name="orgLevel">
                                    <option>高</option>
                                    <option>中</option>
                                    <option>低</option>
                                    <option>很低</option>
                                </select>
                            </div>

                        </div>
                    </form>
                    <span id="errMessages" style="color: red"></span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="onClickAddOrg">提交</button>
                </div>
            </div>
        </div>
    </div>


    {# 编辑账号#}

    <div class="modal fade" id="myEditModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑抓取号</h4>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        {% csrf_token %}
                        <input type="hidden" name="user_id" id="user_id" value="">
                        <div class="form-group">
                            <label for="id_username">抓取号账号名</label>
                            <input type="text" class="form-control" name="user_name" id="id_username" value="">
                        </div>
                        <div class="form-group">
                            <label for="id_password">抓取号密码 <span style="color: red">(*必填)</span></label>
                            <input type="password" class="form-control" name="pwd" id="id_password"
                                   placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="id_nickname">抓取号管理员昵称</label>
                            <input type="text" class="form-control" name="nickname" id="id_nickname"
                                   placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="id_wechat_code">抓取号管理员微信号</label>
                            <input type="text" class="form-control" name="wechat_wxcode" id="id_wechat_code"
                                   placeholder="Email">
                        </div>
                        <span id="errmsg" style="color: red"></span>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button type="button" class="btn btn-primary" id="onClickEditSubmit">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>

<tr>
    <td><img src="" alt=""></td>
</tr>

{% endblock %}
{% block js %}
<script>
    $(function () {
        searchAccount();
        addOrg();
        // 选择搜索框中的公众号
        $('table').on('click', 'button', function () {
            console.log($(this).parents("tr").children('td').eq(1).html());
            console.log($(this).parents("tr").children('td').eq(0).children('img').attr("src"));
            var CsrfToken = $("[name='csrfmiddlewaretoken']").val();
            $.ajax({
                url: "{% url 'wx_official:online_add_org' %}",
                type: "POST",
                data: {
                    "csrfmiddlewaretoken": CsrfToken,
                    "org_logo_img": $(this).parents("tr").children('td').eq(0).children('img').attr("src"),
                    'org_name': $(this).parents("tr").children('td').eq(1).html(),
                    "alias": $(this).parents("tr").children('td').eq(2).html(),
                    "fake_id": $(this).parents("tr").children('td').eq(3).html(),
                },
                success: function (res) {
                    if (res.status) {
                        location.href = '/wx/official/offical_list/default/1/'
                    }
                }
            })
        });
        // 选择要抓取的公众号
        $("#orgLists").on('click', 'a.onClickSpider', function () {
            console.log($(this).parents("tr").children('td').eq(4).html());
            var CsrfToken = $("[name='csrfmiddlewaretoken']").val();
            $.ajax({
                url: "{% url 'wx_official:spider_org' %}",
                data: {"fakeId": $(this).parents("tr").children('td').eq(4).html(), "csrfmiddlewaretoken": CsrfToken},
                type: "POST",
                success: function (result) {
                    // 如果抓取成功 就显示 ...
                    console.log(result)
                }
            })
        });
        // 选择要删除的公众号
        $("#orgLists").on('click', 'a.deleteOrg', function () {
            console.log($(this).parents("tr").children('td').eq(4).html());
            var flag = window.confirm("确定删除吗");
            if (flag) {
                $(this).parents("tr").remove(); // 前端删除数据
                // 异步删除
                $.ajax({
                    url: "{% url 'wx_official:delete_org' %}",
                    data: {"fake_id": $(this).parents("tr").children('td').eq(4).html()},
                    type: "GET",
                    success: function (result) {
                        if (result.status) {
                            location.href = '/wx/official/offical_list/default/1/'
                        }
                    }
                })
            }
        });
        // 选择要抓取的公众哈 如果是禁用状态 启动抓取功能
        $("#onclickAvailable").click(function () {
            setSpiderStatus();
        });
        // 选择要抓取的公众号 全部设置为禁用
        $("#onclickUnAvailable").click(function () {
            setSpiderUnAvailable()
        });
    });

    // 在线搜索公众号的功能
    function searchAccount() {
        $("#searchOrg").click(function () {
            $.ajax({
                url: "{% url 'wx_official:search_org' %}",
                type: "POST",
                data: $("#searhForm").serialize(),
                success: function (result) {
                    if (result.status) {
                        var item;
                        $.each(result.data.list, function (k, v) {
                            item = "<tr id='index_" + k + "' ><td><img src=\"" + v["round_head_img"] + "\" alt=\"\" style='width: 25px'></td><td>" + v['nickname'] + "</td><td>" + v['alias'] + "</td><td>" + v['fakeid'] + "</td><td ><button type=\"button\" class=\"btn btn-primary btn-xs\">确认选择</button></td></tr>";
                            $("#tabJson").append(item)
                        })
                    } else {
                        $("#err_message").text(result.message)
                    }
                }
            })
        })
    }

    // 离线添加公众号
    function addOrg() {
        $("#onClickAddOrg").click(function () {
            $.ajax({
                url: "{% url 'wx_official:add_org' %}",
                data: $("#addOrgs").serialize(),
                type: "POST",
                success: function (res) {
                    if (res.status) {
                        location.href = '/wx/official/offical_list/default/1/'
                    } else {
                        console.log(res.message);
                        $("#errMessages").text(res.message)
                    }
                }
            });
        })
    }

    // 前端设置 一旦禁用公众号 就无法点击抓取功能
    function setSpiderStatus() {
        $('.org_list_td').find(':checked').parents('tr').each(function () {
            // 前端解禁
            $(this).find("#spiderPrg").removeAttr("disabled");
            var CsrfToken = $("[name='csrfmiddlewaretoken']").val();
            // 后端解禁
            $.ajax({
                url: "{% url 'wx_official:set_availiable_orgs' %}",
                data: {"fakeid": $(this).find(".orgFakeId").text(), "csrfmiddlewaretoken": CsrfToken,},
                type: "POST",
                success: function (result) {
                    if (result.status) {
                        location.href = "{% url 'wx_official:offical_list' type_name 1 %}"
                    } else {
                        console.log(result.message)
                    }
                }
            })
        })
    }

    function setSpiderUnAvailable() {
        $('.org_list_td').find(':checked').parents('tr').each(function () {
            // 前端禁用事件点击
            var a = $(this).find("#spiderPrg");
            //if (a.attr("disabled")){
            //    return
            //}
            //a.attr("disabled", "true");

            a.css("pointer-events","none");
            console.log($(this).find(".orgFakeId").text());
            var CsrfToken = $("[name='csrfmiddlewaretoken']").val();
            // 后端要设置修改
            $.ajax({
                url: "{% url 'wx_official:set_disabled_orgs' %}",
                data: {"fakeid": $(this).find(".orgFakeId").text(), "csrfmiddlewaretoken": CsrfToken,},
                type: "POST",
                success: function (result) {
                    if (result.status) {
                        location.href = "{% url 'wx_official:offical_list' type_name 1 %}"
                    } else {
                        console.log(result.message)
                    }
                }
            })
        })
    }

</script>
{% endblock %}
